<script lang="ts" setup name="ByGroupDialog">
import { MoreFilled } from '@element-plus/icons-vue'
import { FormInstance } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { Dialog } from '~/src/api/interface'
import { StoreManagement } from '~/src/api/interface/storeManagement'
import { getStoreAPI } from '~/src/api/storeManagement'
import SelectTable from '/@vab/components/SelectTable/index.vue'

const dialogProps = ref<Dialog<Partial<StoreManagement.Merchant>>>({
  title: '新增',
  data: {},
  visible: false,
})

const rules = reactive({
  // passWord: [{ required: true, trigger: "blur", message: "请选输入" }]
})
const selectTableRef = ref<InstanceType<typeof SelectTable> | null>(null)
const openSelectTable = (title: string, ix: number) => {
  selectTableRef.value?.acceptParams({
    title,
    isView: false,
    index: ix,
    apiParams: { isGroup: 1 },
    selType: 'radio',
    columns: [
      { type: 'radio', label: '单选', width: 60 },
      { prop: 'id', label: '编码', align: 'left' },
      { prop: 'storeName', label: '名称', align: 'left' },
    ],
    api: getStoreAPI,
  })
}
const onRadio = (row: any) => {
  dialogProps.value.data.parentStoreId = row.data.id
  dialogProps.value.data.parentStoreName = row.data.storeName
}

// 接收父组件传过来的参数
const acceptParams = (params: Dialog<Partial<StoreManagement.Merchant>>) => {
  console.log(params)

  dialogProps.value = cloneDeep(params)
  dialogProps.value.data = cloneDeep(params.data)
  dialogProps.value.visible = true
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>()
const handleSubmit = async () => {
  await ruleFormRef.value!.validate()
  try {
    await dialogProps.value.api!(dialogProps.value.data)
    ElMessage.success({ message: `${dialogProps.value.title}商户成功！` })
    dialogProps.value.getTableList!()
    dialogProps.value.visible = false
  } catch (error) {
    console.log(error)
  }
}
defineExpose({ acceptParams })
</script>

<template>
  <vab-dialog v-model:modelValue="dialogProps.visible" destroy-on-close :title="dialogProps.title + '部门'" :width="600">
    <el-form ref="ruleFormRef" label-suffix=" :" label-width="120px" :model="dialogProps.data" :rules="rules">
      <el-form-item label="上级商户" prop="parentStoreId">
        <el-input v-model="dialogProps.data.parentStoreName" disabled>
          <template #append><el-button :icon="MoreFilled" @click="openSelectTable('商户选择', 0)" /></template>
        </el-input>
      </el-form-item>
      <el-form-item label="是否创建激活码" prop="isCreateFacCode">
        <el-select v-model="dialogProps.data.isCreateFacCode" class="w100">
          <el-option label="创建" :value="true" />
          <el-option label="不创建" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item label="默认密码" prop="passWord">
        <el-input v-model="dialogProps.data.passWord" clearable />
      </el-form-item>
      <el-form-item label="连续新增数量" prop="createCount">
        <input-number-float v-model="dialogProps.data.createCount" v-selectAll class="w100" :controls="false" :max="100" />
      </el-form-item>
      <el-form-item label="有效日期" prop="endDate">
        <el-date-picker v-model="dialogProps.data.endDate" class="w100" type="date" />
      </el-form-item>
    </el-form>
    <select-table ref="selectTableRef" @radio="onRadio" />
    <template #footer>
      <el-button @click="dialogProps.visible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </vab-dialog>
</template>

<style lang="scss" scoped></style>
